<template>
	<div style='background: #fff'>
		<div class='content-title'>文件管理</div>
		<div style='padding:35px 20px'>
			<button class='btn btn-hover' style='width:100px;line-height: 30px;padding:0 10px;display: flex' @click='addFile'>
                <i class='iconfont icon-icon-test7' style='font-size: 20px'></i>
                <span>上传文件</span>
            </button>
			<div style="padding:1px">
				<Table :columns="fileList" :data="fileData" stripe></Table>
                
			</div>
	    	<div style='overflow: hidden'>
	    		<Page :total="pagination.rowCount" :page-size='pagination.pageSize' :current='currentPage' style='float: right;margin: 20px 0;' @on-change='changePage'></Page>
	    	</div>
		</div>
		<!-- 上传文件 -->
        <Modal v-model="modal" width="600">
            <p slot="header">
                <span>上传文件</span>
            </p>
            <div style='margin-bottom: 24px'>
            	<Upload
			        multiple
                    type="drag"
                    :action="getUrl('/home/app/file/uploads')"
                    :on-success="handleAddSuccess"
                    :show-upload-list="false"
                    :headers="uploadHeaders()"
			        >
			        <div style="height:190px;padding:10px 0">
					    <div style='width:100px;height:100px;margin: 20px auto;background:rgba(16,141,233,0.1);border-radius: 50px;padding:30px'>
		                	<Icon type="ios-cloud-upload" color='#06A0FD' size='40'></Icon>
		                </div>
			            <p>点击或将文件拖拽到这里上传</p>
			        </div>
			    </Upload>
            </div>
            <div slot="footer">
                <button class='btn-cancel' @click="cancel">取消</button>
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
        <!-- 修改文件名字 -->
        <Modal v-model="filename_modal" width="600">
            <p slot="header">
                <span>编辑文件</span>
            </p>
            <div>
                <Form :label-width='60' label-position='left'>
                    <FormItem label='名称'>
                        <Input v-model='filename' placeholder='请输入文件名称'></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <button class='btn-cancel' @click="cancel">取消</button>
                <button class='btn-sure' @click="filename_sure">确认</button>
            </div>
        </Modal>
	</div>
</template>
<script type="text/javascript">
    import fileImg from '../../../../images/file2.png';
    import dirImg from '../../../../images/file3.png';
	export default{
		data(){
			return{
				modal:false,
                filename_modal:false,
				fileList: [
                    {
                        title: '缩略图',
                        key: 'img',
                        render:(h,params)=>{
                            if(params.row.ext == 'jpg' || params.row.ext == 'png' || params.row.ext == 'gif'){
                                params.row.img = params.row.savepath;
                            }else if(params.row.ext == 'dir'){
                                params.row.img = dirImg;
                            }else{
                                params.row.img = fileImg;
                            }
                            return h('div',
                                    [
                                    h('img',{
                                        attrs:{
                                            src:params.row.img
                                        },
                                        style:{
                                            maxHeight:'60px',
                                            maxWidth:'60px',
                                            marginTop:'5px'
                                        }
                                    })
                                ])
                        }
                    },
                    {
                        title: '路径',
                        key: 'savepath',
                        render: (h, params) => {
                            let link = params.row.savepath;
                            return h('div', [
                                h('a',{
                                    attrs:{
                                        // href:link,
                                        // target:'_blank',
                                        title:link
                                    },
                                    
                                    directives:[{
                                        name:'clipboard',
                                        value:link
                                    }],
                                    on:{
                                        'success':(e)=>{
                                            this.handleSuccess(e)
                                        }
                                    }
                                }, '链接')
                            ]);
                            
                        }
                    },
                    {
                        title: '类型',
                        key: 'ext'
                    },
                    // {
                    //     title: '大小',
                    //     key: 'size'
                    // },
                    {
                        title: '名字',
                        key: 'name'
                    },
                    {
                        title: '创建时间',
                        width:160,
                        key: 'created_at',
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.created_at))
                            ]);
                        }
                    },
                    {
                        title: '更新时间',
                        width:160,
                        key: 'updated_at',
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.updated_at))
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.del(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                fileData: [],
                pagination:{},
                currentPage:1,
                filename:''
			}
		},
        created(){
            // this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            this.getData();
        },
		methods:{
            getData(){
                let url = '/home/app/file/page/' + this.currentPage;
                this.fetch(url).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.fileData = res.data.data.data;
                        this.pagination = res.data.data.pagination;
                    }
                })
            },
            changePage(page){
                this.currentPage = page;
                this.getData();
            },
            handleAddSuccess(res){
                if(res.code){
                    this.modal = false;
                    this.$Message.success('上传成功')
                    this.currentPage = 1;
                    this.getData();
                }else{
                    this.$Message.warning(res.data)
                }
            },
            handleSuccess(e) {
                this.$Message.success('复制成功')
            },
            edit(row){
                this.filename_modal = true;
                this.filename = row.name;
                this.id = row.id;
            },
            filename_sure(){
                if(!this.filename){
                    this.$Message.warning('请填写文件名字')
                    return;
                }
                this.fetch('/home/app/file/rename',{
                    newName:this.filename,
                    id:this.id
                }).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.$Message.success('修改成功')
                        this.getData();
                        this.filename_modal = false;
                    }
                })
            },
            del(row){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除吗</p>',
                    onOk: () => {
                        this.fetch('/home/app/file/delete',{
                            del_id:row.id
                        }).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getData();
                            }
                        })
                    }
                });
            },
			addFile(){
				this.modal = true;
			},
			cancel(){
                this.modal = false;
                this.filename_modal = false;
			},
			sure(){
                this.$Message.warning('请上传文件')
			}
		}
	}
</script>
